import React, { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { communityList, knowLedgeSelect } from "store/CommunityPortList";
import { useDispatch, useSelector } from "react-redux";
import TimeFormatter from "../Content_Date";
const ContentPage = ({ id }: { id: number }) => {
  const dispatch = useDispatch<any>();
  const navigate = useNavigate();
  const data = useSelector(knowLedgeSelect);
  useEffect(() => {
    if (data[id]) return;
    dispatch(communityList(id));
  }, [id]);
  // 详情跳转
  const gotoDetail = () => {
    navigate('/detail');
  };
  return (
    <div className="main">
      {data[id]?.length >= 0 &&
        data[id]?.map((v: any, i: any) => (
          <div className="main-item" key={i} onClick={gotoDetail}>
            <div className="p1">{v.title || "空"}</div>
            <div className="p2">
              <TimeFormatter timestamp={v.releaseTime} />
            </div>
            <div className="p3">{v.detail}</div>
            <div className="p4">
              收藏{v.collectionNum}
              <span>建议{v.commentNum}</span>
            </div>
          </div>
        ))}
    </div>
  );
};

export default ContentPage;
